<template lang="pug">
  .app-container.product
    h1.page-title 产品配置
    .main
      h2.title 产品列表
      .search-bar
        el-form(
          ref="form"
          :inline="true"
          :model="form"
          label-width="80px")
          el-form-item(label="所属系统")
            el-select(v-model="form.value1" placeholder="所属系统")
              el-option(
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value")

          el-form-item(label="节点类型")
            el-select(v-model="form.value2" placeholder="节点类型")
              el-option(
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value")

          el-form-item(label-width="140px" label="产品编号/产品名称")
            el-input(v-model="form.keyword" placeholder="产品编号/产品名称")

          el-form-item
            el-button(type="primary" @click="onSubmit") 查询
        //- end form
      .tool-bar
        el-row
          el-button(type="primary" @click="onCreate") 添加产品
          el-button(type="warning") 批量导入
          el-button(type="danger") 删除
      .table-wrapper
        //- el-scrollbar(style="height:100%")
          //- div(style="margin-right:20px")
        el-table(
          :data="list"
          stripe
          highlight-current-row=true
          style="width: 100%"
          height="100%")
          el-table-column(
            prop="typeCode"
            label="产品编码")
          el-table-column(
            prop="typeName"
            label="产品名称")
          el-table-column(
            prop=""
            label="协议类型")
          el-table-column(
            prop=""
            label="所属系统")
          el-table-column(
            prop=""
            label="产品类型")
          el-table-column(
            prop="typeFilePath")
            template(slot="header" slot-scope="scope")
              .label(style="text-align:center") 产品图标
            template(slot-scope="scope")
              div(style="text-align:center")
                el-image(
                style="width: 40px; height: 40px;vertical-align: top;"
                :src="scope.row.typeFilePath"
                fit="scale-down")
          el-table-column(
            prop="typeDeviceImgFilePath")
            template(slot="header" slot-scope="scope")
              .label(style="text-align:center") 产品图片
            template(slot-scope="scope")
              div(style="text-align:center")
                el-image(
                style="width: 40px; height: 40px;vertical-align: top;"
                :src="scope.row.typeDeviceImgFilePath"
                fit="scale-down")
          el-table-column(width="300")
            template(slot="header" slot-scope="scope")
              .label(style="text-align:center") 操作
            template(slot-scope="scope")
              //- router-link(:to="'/data/device-type/detail/'+scope.row.id") 查看
              div(style="text-align:center")
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-search"
                  @click="handleDetail(scope.$index, scope.row)") 查看
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-link"
                  @click="handleEdit(scope.$index, scope.row)") 设备管理
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-copy-document"
                  @click="handleEdit(scope.$index, scope.row)") 复制
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)") 删除
      .pagination-wrapper
        el-pagination(
          background
          layout="total, prev, pager, next, jumper"
          :total="1000")
</template>

<script>
export default {
  name: 'ProductIndex',
  data () {
    return {
      form: {
        value1: '',
        value2: '',
        keyword: ''
      },
      options1: [
        {
          value: 0,
          label: '全部系统'
        },
        {
          value: 1,
          label: '供水'
        },
        {
          value: 2,
          label: '给排水'
        },
        {
          value: 3,
          label: '供配电'
        },
        {
          value: 4,
          label: '暖通空调'
        },

        {
          value: 5,
          label: '消防'
        },
        {
          value: 6,
          label: '中央空调'
        },
        {
          value: 7,
          label: '排风机设备'
        },
        {
          value: 8,
          label: '空调机组设备'
        },
        {
          value: 9,
          label: '冷冻水系统公共设备'
        },
        {
          value: 10,
          label: '新风机组设备'
        },
        {
          value: 11,
          label: '环境'
        },
        {
          value: 12,
          label: '网络摄像头'
        },
        {
          value: 13,
          label: '电梯'
        },
        {
          value: 14,
          label: '能源'
        },

        {
          value: 15,
          label: '其他'
        }
      ],
      options2: [
        {
          value: 0,
          label: '全部产品'
        },
        {
          value: 1,
          label: '默认产品'
        },
        {
          value: 2,
          label: '阿里云产品'
        },
        {
          value: 3,
          label: '电信产品'
        },
        {
          value: 4,
          label: '阿里云网关'
        },

        {
          value: 5,
          label: '终端设备'
        },
        {
          value: 6,
          label: '普通网关'
        }
      ],
      list: [
        {
          id: 296,
          typeName: 'Bim模型设备',
          delFlag: 0,
          mark: 1,
          typeCode: 1,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            },
            {
              projectName: '自贸大厦0624',
              projectId: 9
            }
          ]
        },
        {
          id: 10,
          typeName: '视频设备',
          typeFilePath: '/data/icon/deviceTypeIcon/20190308143514264304.jpg',
          delFlag: 0,
          mark: 2,
          typeCode: 2,
          createCompanyId: 76,
          typeDeviceImgFilePath: '/data/img/deviceImg/20190309150111279447.jpg',
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 155,
          typeName: '变压器',
          delFlag: 0,
          mark: 3,
          typeCode: 100,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 156,
          typeName: '进线柜',
          delFlag: 0,
          mark: 4,
          typeCode: 101,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 157,
          typeName: '馈线柜',
          delFlag: 0,
          mark: 5,
          typeCode: 102,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16803,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 296,
          typeName: 'Bim模型设备',
          delFlag: 0,
          mark: 1,
          typeCode: 1,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            },
            {
              projectName: '自贸大厦0624',
              projectId: 9
            }
          ]
        },
        {
          id: 10,
          typeName: '视频设备',
          typeFilePath: '/data/icon/deviceTypeIcon/20190308143514264304.jpg',
          delFlag: 0,
          mark: 2,
          typeCode: 2,
          createCompanyId: 76,
          typeDeviceImgFilePath: '/data/img/deviceImg/20190309150111279447.jpg',
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 155,
          typeName: '变压器',
          delFlag: 0,
          mark: 3,
          typeCode: 100,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 156,
          typeName: '进线柜',
          delFlag: 0,
          mark: 4,
          typeCode: 101,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 157,
          typeName: '馈线柜',
          delFlag: 0,
          mark: 5,
          typeCode: 102,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16803,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 296,
          typeName: 'Bim模型设备',
          delFlag: 0,
          mark: 1,
          typeCode: 1,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            },
            {
              projectName: '自贸大厦0624',
              projectId: 9
            }
          ]
        },
        {
          id: 10,
          typeName: '视频设备',
          typeFilePath: '/data/icon/deviceTypeIcon/20190308143514264304.jpg',
          delFlag: 0,
          mark: 2,
          typeCode: 2,
          createCompanyId: 76,
          typeDeviceImgFilePath: '/data/img/deviceImg/20190309150111279447.jpg',
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 155,
          typeName: '变压器',
          delFlag: 0,
          mark: 3,
          typeCode: 100,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 156,
          typeName: '进线柜',
          delFlag: 0,
          mark: 4,
          typeCode: 101,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 157,
          typeName: '馈线柜',
          delFlag: 0,
          mark: 5,
          typeCode: 102,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16803,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        }
      ]
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!', this.form)
    },
    onCreate () {
      this.$router.push({ name: 'CreateProduct' })
    },

    handleDetail (index, row) {
      this.$router.push({ path: '/product/detail/' + row.id })
    }
  }
}
</script>

<style lang="stylus" scoped>
.app-container
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  background-color #f2f2f7
  padding 20px
  display flex
  flex-direction column
.page-title
  margin-top 0
  color #000
  font-size 24px
  font-weight normal
  flex-shrink 0
.main
  flex 1
  overflow hidden
  background-color #ffffff
  display flex
  flex-direction column
.title
  display flex
  align-items center
  color #000
  font-size 20px
  font-weight normal
  &::before
    content ''
    display inline-block
    width 7px
    height 22px
    margin-right 20px
    background-color #017eff
.search-bar
  margin 0 20px
.tool-bar
  margin 0 20px
.table-wrapper
  margin 20px
  flex 1
  overflow hidden
.pagination-wrapper
  margin 20px
  display flex
  justify-content flex-end
</style>

<style lang="stylus">
  .el-scrollbar__wrap
    overflow-x hidden
  .el-table
    .current-row
      // border: 1px solid #1890ff
      background-color #edf3f8
      position relative
      &::after
        content ''
        position absolute
        right 0
        height 58px
        left 0
        border: 1px solid #1890ff
        pointer-events none
    thead
      color #1F232B
    th
      background-color #F8F8F9
</style>
